<template>
  <div :class="$style.container" v-loading.fullscreen.lock="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <btnList :isAdd="true" :isEdit="true" :isDel="true" @btn_list="handleBtnClick" :currentRowData="isSelectData"/>
      </div>
      <!-- 搜索表单 -->
      <el-form :model="searchForm" :inline="true" style="margin-top:10px;margin-bottom:20px;">
        <el-form-item label="id号:" :label-width="formLabelWidth">
          <el-input v-model="searchForm.id" autocomplete="off" clearable placeholder="请输入id号"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button @click.stop="init" type="primary">查询</el-button>
          <el-button @click.stop="handleResetClick" type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 电影表格 -->
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column width="50">
          <template slot-scope="scope">
            <el-radio v-model="isSelectData" :label="scope.row">{{''}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="doubanId" label="id" min-width="180">
        </el-table-column>
        <el-table-column prop="original_title" label="原始名称" min-width="180">
        </el-table-column>
        <el-table-column prop="countries" label="国家" min-width="180">
        </el-table-column>
        <el-table-column prop="year" label="上映时间" min-width="180">
        </el-table-column>
        <el-table-column prop="rate" label="评分" min-width="180">
        </el-table-column>
        <el-table-column prop="directors" label="导演" min-width="180">
        </el-table-column>
        <el-table-column prop="actors" label="演员" min-width="180">
        </el-table-column>
        <el-table-column prop="genres" label="类型" min-width="180">
        </el-table-column>
        <el-table-column  label="操作" min-width="80">
          <template slot-scope="scope">
            <el-button type="text" @click.stop="handlePlayClick(scope.row)">预览</el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" @click.stop="handleUpOrDownClick(scope.row)">{{scope.row.status ? '下架' : '上架'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PaginationNumber :page="page" @pagination="handlePaginationClick" />
    </el-card>
    <el-dialog :title="title" :visible.sync="showModal" width="65%">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="id号:" :label-width="formLabelWidth" v-if="title==='编辑电影'">
          <el-input v-model="form.doubanId" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="原始名称:" :label-width="formLabelWidth" prop="original_title">
          <el-input v-model="form.original_title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="国家:" :label-width="formLabelWidth" prop="countries">
          <el-select v-model="form.country" multiple placeholder="请选择">
            <el-option label="中国大陆" value="中国大陆"></el-option>
            <el-option label="中国香港" value="中国香港"></el-option>
            <el-option label="中国" value="中国"></el-option>
            <el-option label="香港" value="香港"></el-option>
            <el-option label="美国" value="美国"></el-option>
            <el-option label="英国" value="英国"></el-option>
            <el-option label="日本" value="日本"></el-option>
            <el-option label="韩国" value="韩国"></el-option>
            <el-option label="印度" value="印度"></el-option>
            <el-option label="法国" value="法国"></el-option>
            <el-option label="俄罗斯" value="俄罗斯"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格:" :label-width="formLabelWidth" prop="year">
          <el-input v-model="form.price" placeholder="免费"></el-input>
        </el-form-item>
        <el-form-item label="上映时间:" :label-width="formLabelWidth" prop="year">
          <el-date-picker v-model="form.year" type="year" placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="评分:" :label-width="formLabelWidth">
          <el-input v-model="form.rate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="导演:" :label-width="formLabelWidth" prop="directors">
          <el-input v-model="form.directors" autocomplete="off" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="演员:" :label-width="formLabelWidth" prop="actors">
          <el-input v-model="form.actors" autocomplete="off" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="类型:" :label-width="formLabelWidth" prop="genres">
          <el-select v-model="form.genre" multiple placeholder="请选择">
            <el-option label="爱情" value="爱情"></el-option>
            <el-option label="同性" value="同性"></el-option>
            <el-option label="剧情" value="剧情"></el-option>
            <el-option label="犯罪" value="犯罪"></el-option>
            <el-option label="儿童" value="儿童"></el-option>
            <el-option label="家庭" value="家庭"></el-option>
            <el-option label="奇幻" value="奇幻"></el-option>
            <el-option label="动作" value="动作"></el-option>
            <el-option label="科幻" value="科幻"></el-option>
            <el-option label="喜剧" value="喜剧"></el-option>
            <el-option label="惊悚" value="惊悚"></el-option>
            <el-option label="传记" value="传记"></el-option>
            <el-option label="悬疑" value="悬疑"></el-option>
            <el-option label="恐怖" value="恐怖"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图:" :label-width="formLabelWidth" prop="coverurl">
          <el-upload class="avatar-uploader" :action="form.coverurl" :show-file-list="false" :on-success="handleAvatarSuccess1">
            <img v-if="form.coverurl" :src="form.coverurl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="海报图:" :label-width="formLabelWidth" prop="poster">
           <el-upload class="avatar-uploader" :action="form.poster" :show-file-list="false" :on-success="handleAvatarSuccess2">
            <img v-if="form.poster" :src="form.poster" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="视频:" :label-width="formLabelWidth" prop="videoUrl">
          <el-upload class="avatar-uploader" :action="form.poster" :show-file-list="false" :on-success="handleAvatarSuccess3">
            <img v-if="form.videoUrl" src="//img.mukewang.com//54584d1d00015c0b02200220.jpg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="别名:" :label-width="formLabelWidth">
          <el-input v-model="form.aka" autocomplete="off" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="简介:" :label-width="formLabelWidth">
          <el-input v-model="form.summary" autocomplete="off" type="textarea" autosize></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="showModal = false">取 消</el-button>
        <el-button type="primary" @click="handleSumbit('ruleForm')">保存</el-button>
      </div>
    </el-dialog>

     <el-dialog :visible.sync="showVideo" :before-close="handleCloseVideoClick">
      <VideoFilm :url="item.videoUrl" :poster="item.poster" width="600px" height="400px" :destory="destory"/>
    </el-dialog>
  </div>
</template>
<script>
import VideoFilm from '../../../../components/video'
export default {
  data() {
    return {
      loading: false,
      destory: false,
      showVideo: false,
      tableData: [],
      isSelectData: {},
      item:{},
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      searchForm: {
        id: ""
      },
      formLabelWidth: "120px",
      showModal: false,
      form: {},
      title: "新增电影",
      rules: {
        original_title: [
          { required: true, message: "请填写名称", trigger: "blur" }
        ],
        countries: [{ required: true, message: "请填写国家", trigger: "blur" }],
        year: [{ required: true, message: "请选择年份", trigger: "blur" }],
        actors: [{ required: true, message: "请填写演员", trigger: "blur" }],
        genres: [{ required: true, message: "请选择类型", trigger: "blur" }],
        coverurl: [
          { required: true, message: "请上传封面图", trigger: "blur" }
        ],
        poster: [{ required: true, message: "请上传海报图", trigger: "blur" }],
        videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }]
      }
    };
  },
  components: {
    VideoFilm
  },
  mounted() {
    this.init();
  },
  watch: {
    showModal(newValue) {
      if (!newValue) {
        this.isSelectData = {};
        this.reset()
      }
    }
  },
  methods: {
    async init() {
      try {
        let params = {
          size: this.page.size,
          page: this.page.current
        };

        if (this.searchForm.id) {
          params.id = this.searchForm.id;
        }
        this.loading = true
        let res = await this.$http.get(`/film/getFilm`, params);
        this.loading = false
        if (res.code === 0) {
          this.tableData = res.data.Flist.map(item => {
            item.country = item.countries;
            item.countries = item.countries && item.countries.join("、");

            item.directors =
              item.directors && item.directors.map(a => a.name).join("、");
            item.actors =
              item.actors && item.actors.map(a => a.name).join("、");
            item.genre = item.genres;
            item.genres = item.genres && item.genres.join("、");

            item.aka = item.aka && item.aka.join("、");
            return item;
          });
          this.page.total = res.data.count
        }
      } catch (err) {
        console.log("111:", err);
      }
    },
    // 改变分页
    handlePaginationClick(page, size) {
      this.page.current = page;
      this.page.size = size;
      this.init();
    },
    // 保存
    handleSumbit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.title = "编辑电影") {
            this.update()
          }
          this.showModal = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置btn
    handleResetClick () {
      this.searchForm.id = ''
      this.init()
    },
    reset() {
      this.form = {
        title: '',
        country: [],
        price:'',
        year:'',
        rate:'',
        directors:'',
        actors:'',
        genre:[],
        coverurl:'',
        poster:'',
        videoUrl:'',
        aka:'',
        summary:''
      }
    },
    // 更新电影信息
    async update () {
      try {
        let params = {
          _id:this.form._id,
          title:this.form.original_title,
          country: this.form.country,
          price: this.form.price,
          year: this.form.year,
          rate: this.form.rate,
          directors: this.form.directors.split('、').map(item => ({name:item})),
          actors: this.form.actors.split('、').map(item => ({name:item})),
          genre: this.form.genre,
          coverurl: this.form.coverurl,
          poster: this.form.poster,
          videoUrl: this.form.videoUrl,
          aka: this.form.aka.split('、'),
          summary: this.form.summary
        }
        this.loading = true
        let res = await this.$http.post(`/film/updateFilm`,params)
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.init()
        }
      } catch(err) {
        console.log('update film fail:',err)
      }
    },
    // 点击顶部的按钮
    handleBtnClick(type) {
      if (type === "add") {
        this.title = "新增电影";
        this.showModal = true;
      } else if (type === "edit") {
        this.title = "编辑电影";
        this.form = { ...this.isSelectData };
        if (Object.keys(this.form).length > 0) {
          this.showModal = true;
        }
      } else if (type === "del") {
      }
    },
    // 上传封面图
    handleAvatarSuccess1 (res, file) {
      this.form.coverurl = URL.createObjectURL(file.raw)
    },
    // 上传海报图
    handleAvatarSuccess2 (res, file) {
      this.form.poster = URL.createObjectURL(file.raw)
    },
    // 上传视频
    handleAvatarSuccess3 (res, file) {
      this.form.videoUrl = URL.createObjectURL(file.raw)
    },
    // 关闭视频
    handleCloseVideoClick () {
      this.showVideo = false
      this.destory = true
    },
    handlePlayClick (row) {
      this.item = row
      this.showVideo = true
    },
    // 电影上下架
    async handleUpOrDownClick (row) {
      try {
        let params = {
          status:!row.status,
          id: row.doubanId
        }
        this.loading = true
        let res = await this.$http.post(`/film/upOrDown`, params)
        this.loading = false
        this.init()
        this.$message({
          type:'success',
          message: `${row.status ? '下架' : '上架'}成功`
        })
        
      } catch(err) {
          console.log('film up or down fail:',err)
      }
    }
  }
};
</script>
<style lang="scss" module>
.container {
  padding: 20px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
